import React  from 'react';
import {message,Icon,Button,Input,Row,Col,Card,Anchor,Table,Dropdown,Menu} from 'antd';
import styles from '../style/PropertyDataDetailInfo.scss';

import api from 'container/api';
import {
  ASSET_LEVEL,
  IS_NOT,
  GUARANTEE,
  TRANSPORT_TYPE,
  RETURNED_MONEY_WAY,
  RETURNED_MONEY_SOURCE,
  REMARK_TYPE
} from 'constants/index';

//顶部信息
class TopCard extends React.Component {

  constructor(props){
    super(props);
    let {id} = props;
    this.state ={
      id,
      data:{}
    }
  }

  componentWillMount(){
    this.doFetch();
  }

  async doFetch(){
    let {id} = this.state;
    let result = await api('/assets/top-detail',{id});
    if(!result.success){
      message.error(result.message);
      return
    }
    this.setState({data:result.data});
  }

  render(){
    let {data} = this.state;
    return (
      <div className={styles.baseCard}>
        <div className={styles.card}>
          <p>债务人</p>
          <p className={styles.largeSize}>{data.debtor}</p>
          <p>债权人</p>
          <p className={styles.largeSize}>{data.creditor}</p>
        </div>
        <div className={styles.card}>
          <p>应收账款余额</p>
          <p><span className={styles.largeSize} >{data.money_left}</span>元</p>
          <p>总金额：{data.money_sum}元</p>
          <p>已还款：{data.money_repaid}元</p>
        </div>
        <div className={styles.card}>
          <p>应收账款使用天数</p>
          <p><span className={styles.largeSize} >{data.use_days}</span>天（已逾期{data.expire_days}天）</p>
          <p>应收开始日：{data.start_date}</p>
          <p>预期还款日：{data.predict_date}</p>
        </div>
        <div className={styles.card}>
          <p>已结算金额</p>
          <p><span className={styles.largeSize} >{data.settled_price}</span>元</p>
          <p>已结算吨数：{data.settled_amount}吨</p>
          <p>结算应收金额比：{data.setted_rate}%</p>
        </div>
      </div>
    )
  }
}

export default TopCard;